// 通过id为demo取得当前元素  innerHTML就是对当前元素进行赋值=
// document.getElementById("demo").innerHTML = 5 + 6;
// window.alert(1111);//弹出框，不要用，不好看，我们可以自己写一个弹出框，或者用第三方
// console.log(111);// 等同于Java代码的 System.out.println(1111);
//因为js里面一般不打断点，所以我们可以通过console.log(111)去判断是否有没有执行当前代码
//  页面加载完成执行里面的代码
$(function () {
    //页面加载完成加载layui的框架，默认加载form表单
    layui.use('form', function () {
        //通过重新命名得到form对象
        // js的变量定义
        // js 的变量是什么？数据类型是什么？怎么定义变量的？
        var form = layui.form;
        // layer.msg('玩命卖萌中', function(){
        //   //关闭后的操作
        //   });
        //对div进行监听
        //1.通过得到对象直接添加监听事件 document.getElementById("myBtn").addEventListener
        //2.直接在当前的div上天添加onlick事件
        //3.可以通过load来进行添加  属于jquery
        //4.我们可以通过vue
        //5.通过on这种形式，其实也是属于js
        //js 定义方法用function js里面叫方法也可以叫函数 callback  回调函数
        // 第二阶段  如果要写方法，应该有哪些？ 方法名，返回值，参数，权限修饰符 返回值类型
        // 方法可以不要方法名？ 匿名方法
        //监听提交
        //on其实是一个方法，里面需要传递参数
        // 里面的参数可以是字符串，也可以是方法，这个方法，其实是一个对象
        //js的数据类型有哪些？字符串值，数值，布尔值，数组，对象。
        //js 的对象  是用{}来表示  对象：
        //第二阶段对象里面有什么？
        //UserModel={"username":"supeng","password":"123456"}
        // key-value的形式
        //数组：[]来表示 只不过数组里面可以有不同的数据类型
        // let model={"username":"supeng","password":"123456"};
        // let array=[model,"phone",123,true];//如果用Java来接收需要用list

        //自定义验证规则
        form.verify({
            username: [/^[a-zA-Z][\w]{5,15}$/, '用户名在6到16位且第一个必须位英文字符'],
            password: [/(.+){6,12}$/, '密码必须6到12位']

        });
        form.on('submit(login)', function (data) {
            data = data.field;
            // alert(888)
            //怎么拿到用户名和密码的值？
            //1.通过id
            //2.通过form表单
            //js JavaScript 定义变量 var 在版本es6之前是，es6之后就已经不用了
            // let username = document.getElementById("username").value;
            //innerHTML用于div 得到当前div
            //innerText得到当前div里面的值
            // console.log(username);
            // let password=document.getElementById("test").innerHTML;
            // let password = '';
            // console.log(data);//数据类型 对象
            // console.log(data.field);//数据类型对象
            // console.log(data.field.password);//数据类型
            //怎么知道它的数据类型是什么？
            // console.log(typeof data.field.password);
            // password = data.password;
            // if (judge(username, password)) {
            //下面layer.msg()里面的参数类型是什么？
            //第一个参数用于是字符串，第二个参数是对象
            // 面试Java  重载和重写的区别？
            //重载一定是方法名相同，参数类型，个数不同
            // aa(String a,String b),aa(String b ,String a)
            //JSON.stringify(data.field) 是字符串 将json对象转换为字符串
            //Integer.parseInt('1');
            // data.field一定是一个json对象
            // form表单给我们提供的简单的输入格式认证
            //这里的{username:"aaaa",password:"aaaa"}username对应的是页面的name属性
            //现在，我们需要将这些按钮提交到后台，怎么提交到后台呢？
            //需要发送异步请求，需要用到ajax
            //用vue来做，发送数据到后台
            //vue到底是什么东西？能够做什么？有哪些人或者团队在用？
            //百度搜索：
            //jquery 的ajax
            $.ajax({
                url: '/login',//调用后台的地址：和第二阶段的注解保持一致,以后全部写绝对路径
                data: data,//传递给后台的数据,注意：这个地方以后全部用对象的形式
                type: 'post',//对于后台的方法
                dataType: 'json',//规定后台传递到前端的值必须是json格式
                success: function (res) {//如果后台执行完成，并且成功，我们需要一个返回值，res就算后台返回给前端的值
                    //这个地方一定是json对象，而不要是字符串
                    console.log(res);
                    if (res.msg == 'success') {
                        // $("#hid").val("supeng");
                        sessionStorage.setItem("administer",data.username);
                        // localStorage.setItem("username",data.username); //本地存储
                        location.href = 'index.html';
                    //    如果要讲这个用户名（数据）传递到另一个页面？用什么方式？
                    //    如果出现问题需要解决？
                    //    自己阶段根据时间来定，一般情况下超过两三个小时，我们就需要其他方法
                    //    1.自己解决：1）通过大脑 2）通过百度 3）同事 4）问技术总监
                    //    cookie再很多年前都被禁用了
                    //    Java 四大作用域  page  request  session  application
                    //    application 全局   只要是项目里面，所有页面都能找到  可以跨浏览器
                    //    session  会话期  只要项目启动，所有页面都能找到   不能跨浏览器
                    //    session和application的区别？

                    }
                    if (res.msg == 'error') {
                        layer.msg("用户名或者密码错误，请重新输入用户名和密码");
                    }
                    if (res.msg == 'error-code') {
                        layer.msg("验证码错误，请重新输入验证码");
                    }
                }
            });
            //后台怎么接收前端的值？String username = req.getParameter("username");
            //后台怎么传递值给前端？以后无论前端还是后台都必须以json的形式进行传递

            // } else {
            //
            // }

            //不然按钮刷新页面
            return false;
        });
    });
})

//js的方法和java不一样的是参数可以不要有参数类型
// 代码不规范：我们以后不要用if else  或者相互嵌套
//或者你们的代码出现 switch 都是不好的  我们会用策略模式，工厂模式去替代  设计模式
//judge 判断用户名和密码格式是否输入正确
// 如果判断用户名需要很多的条件，则不要手写js去判断，推荐用正则表达式去判断
function judge(username, password) {
    //对于用户名来说，我们可能会对他设置更多的条件？
    //比如：必须是6到16位，不能为空，不能位中文字符，
    // 不能为特殊字符，不能用数字开头
    //
    // if (username != '') {
    //     console.log("用户名不能为空")
    //     return false;
    // }
    //怎么拿到字符串的长度呢？
    // username.length
    // if (username.length <= 6 && username.length >= 16) {
    //     console.log("用户名只能是6到16位的字符")
    //     return false;
    // }
    // console.log("输入格式正确");
    // return true;

    //用户名只能是英文+数字；然后不能是数字开头
    //[]表示只能取里面的一个字符
    //\w 字符数字下划线
    //{m,n} m至少多少个字符，n最多多少个字符
    let uPattern = /^[a-zA-Z][\w]{5,15}$/;
    if (uPattern.test(username)) {

        return true;
    }
    alert("用户名在6到16位且第一个必须位英文字符");
    return false;

}

function tongbu(obj) {
    // $("#username").value这种写法是错的
    // document.getElementById("username").value
    // console.log($("#username"));
    // document.getElementById("tips").innerText = document.getElementById("username").value;
    $("#tips").html($(obj).val());
}

function changeCode() {
    // console.log("/code?t=Math.random()");
    // console.log("/code?t=" + Math.random());
    $("#code").attr("src", "/code?t=" + Math.random());
}
